<template>
  <div class="page-container">
    <div class="page-header">
      <h1>客户信息管理</h1>
      <el-button type="primary" @click="handleAddCustomer" :icon="Plus">
        添加客户
      </el-button>
    </div>

    <div class="content-card">
      <!-- 搜索区域 -->
      <div class="search-section">
        <el-form :model="searchForm" class="search-form">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="6" :lg="6">
              <el-form-item label="客户姓名">
                <el-input
                  v-model="searchForm.name"
                  placeholder="请输入客户姓名"
                  clearable
                  @keyup.enter="handleSearch"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6" :lg="6">
              <el-form-item label="手机号码">
                <el-input
                  v-model="searchForm.phone"
                  placeholder="请输入手机号码"
                  clearable
                  @keyup.enter="handleSearch"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6" :lg="6">
              <el-form-item label="身份证号">
                <el-input
                  v-model="searchForm.idCard"
                  placeholder="请输入身份证号"
                  clearable
                  @keyup.enter="handleSearch"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6" :lg="6">
              <el-form-item label="客户状态">
                <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 100%">
                  <el-option label="全部" value="" />
                  <el-option label="正常" value="正常" />
                  <el-option label="黑名单" value="黑名单" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="search-buttons">
              <el-button type="primary" @click="handleSearch" :loading="searching">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
              <el-button @click="handleReset">
                <el-icon><Refresh /></el-icon>
                重置
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 客户列表 -->
      <div class="table-section">
        <el-table
          :data="customerList"
          style="width: 100%"
          v-loading="loading"
          empty-text="暂无客户数据"
          @row-click="handleRowClick"
          class="customer-table"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        >
          <el-table-column prop="id" label="ID" width="80" align="center" />
          <el-table-column prop="name" label="姓名" min-width="100" show-overflow-tooltip />
          <el-table-column prop="phone" label="手机号" min-width="130" show-overflow-tooltip />
          <el-table-column prop="cartNumber" label="身份证号" min-width="160" show-overflow-tooltip />
          <el-table-column prop="status" label="状态" width="80" align="center">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)" size="small">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="rentalCount" label="租车次数" width="90" align="center">
            <template #default="scope">
              <span class="rental-count">{{ scope.row.rentalCount || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="lastRental" label="最近租车" min-width="120" show-overflow-tooltip />
          <el-table-column label="操作" width="120" align="center" fixed="right">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click.stop="handleViewDetail(scope.row)"
                :icon="View"
                circle
                title="查看详情"
              />
              <el-button
                size="small"
                type="warning"
                @click.stop="handleEditCustomer(scope.row)"
                :icon="Edit"
                circle
                title="修改信息"
                style="margin-left: 5px;"
              />
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 客户详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="客户详细信息"
      width="800px"
      :before-close="handleDetailClose"
    >
      <div v-if="selectedCustomer" class="customer-detail">
        <!-- 基本信息 -->
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="客户ID">{{ selectedCustomer.id }}</el-descriptions-item>
          <el-descriptions-item label="客户姓名">{{ selectedCustomer.name }}</el-descriptions-item>
          <el-descriptions-item label="手机号码">{{ selectedCustomer.phone }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ selectedCustomer.cartNumber }}</el-descriptions-item>
          <el-descriptions-item label="客户状态">
            <el-tag :type="getStatusType(selectedCustomer.status)">
              {{ selectedCustomer.status }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="租车次数">{{ selectedCustomer.rentalCount || 0 }} 次</el-descriptions-item>
          <el-descriptions-item label="最近租车时间" :span="2">
            {{ selectedCustomer.lastRental || '暂无记录' }}
          </el-descriptions-item>
        </el-descriptions>

        <!-- 租赁历史记录 -->
        <div class="rental-history" style="margin-top: 30px;">
          <h3>租赁历史记录</h3>
          <el-table
            :data="rentalHistory"
            style="width: 100%"
            v-loading="historyLoading"
            empty-text="暂无租赁记录"
            size="small"
          >
            <el-table-column prop="id" label="租赁ID" width="100" />
            <el-table-column prop="carInfo" label="车辆信息" width="200" />
            <el-table-column prop="startRentalTime" label="开始时间" width="120" />
            <el-table-column prop="endRentalTime" label="结束时间" width="120" />
            <el-table-column prop="money" label="金额" width="100">
              <template #default="scope">
                ¥{{ scope.row.money }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getRentalStatusType(scope.row.status)">
                  {{ getRentalStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加客户对话框 -->
    <el-dialog
      v-model="addDialogVisible"
      title="添加客户"
      width="600px"
      :before-close="handleAddDialogClose"
    >
      <el-form
        ref="addCustomerFormRef"
        :model="addCustomerForm"
        :rules="addCustomerRules"
        label-width="100px"
        class="add-customer-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户姓名" prop="name">
              <el-input v-model="addCustomerForm.name" placeholder="请输入客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="addCustomerForm.phone" placeholder="请输入手机号码" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="身份证号" prop="cartNumber">
              <el-input v-model="addCustomerForm.cartNumber" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户状态" prop="status">
              <el-select v-model="addCustomerForm.status" placeholder="请选择状态" style="width: 100%">
                <el-option label="正常" value="正常" />
                <el-option label="黑名单" value="黑名单" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleAddDialogClose">取消</el-button>
          <el-button type="primary" @click="handleSubmitCustomer" :loading="submittingCustomer">
            确定添加
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改客户对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="修改客户信息"
      width="600px"
      :before-close="handleEditDialogClose"
    >
      <el-form
        ref="editCustomerFormRef"
        :model="editCustomerForm"
        :rules="editCustomerRules"
        label-width="100px"
        class="edit-customer-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户姓名" prop="name">
              <el-input v-model="editCustomerForm.name" placeholder="请输入客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="editCustomerForm.phone" placeholder="请输入手机号码" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="身份证号" prop="cartNumber">
              <el-input v-model="editCustomerForm.cartNumber" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户状态" prop="status">
              <el-select v-model="editCustomerForm.status" placeholder="请选择状态" style="width: 100%">
                <el-option label="正常" value="正常" />
                <el-option label="黑名单" value="黑名单" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleEditDialogClose">取消</el-button>
          <el-button type="primary" @click="handleUpdateCustomer" :loading="updatingCustomer">
            确定修改
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Refresh, View, Plus, Edit } from '@element-plus/icons-vue'
import api from '@/api/auth'

// 响应式数据
const loading = ref(false)
const searching = ref(false)
const historyLoading = ref(false)
const detailDialogVisible = ref(false)
const addDialogVisible = ref(false)
const editDialogVisible = ref(false)
const submittingCustomer = ref(false)
const updatingCustomer = ref(false)

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const customerList = ref([])

// 搜索表单
const searchForm = reactive({
  name: '',
  phone: '',
  idCard: '',
  status: ''
})

// 选中的客户和租赁历史
const selectedCustomer = ref(null)
const rentalHistory = ref([])

// 表单引用
const addCustomerFormRef = ref(null)
const editCustomerFormRef = ref(null)

// 添加客户表单
const addCustomerForm = reactive({
  name: '',
  phone: '',
  cartNumber: '',
  status: '正常'
})

// 修改客户表单
const editCustomerForm = reactive({
  id: null,
  name: '',
  phone: '',
  cartNumber: '',
  status: '正常'
})

// 添加客户表单验证规则
const addCustomerRules = {
  name: [
    { required: true, message: '请输入客户姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  cartNumber: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号', trigger: 'blur' }
  ],
  status: [
    { required: true, message: '请选择客户状态', trigger: 'change' }
  ]
}

// 修改客户表单验证规则
const editCustomerRules = {
  name: [
    { required: true, message: '请输入客户姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  cartNumber: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号', trigger: 'blur' }
  ],
  status: [
    { required: true, message: '请选择客户状态', trigger: 'change' }
  ]
}

// 获取客户列表数据
const fetchCustomerList = async (isSearch = false) => {
  try {
    if (isSearch) {
      searching.value = true
    } else {
      loading.value = true
    }

    const token = localStorage.getItem('Token')
    if (!token) {
      ElMessage.error('未登录或登录已过期')
      return
    }

    // 构建查询参数
    const params = {
      page: currentPage.value,
      size: pageSize.value
    }

    // 添加搜索条件
    if (searchForm.name) params.name = searchForm.name
    if (searchForm.phone) params.phone = searchForm.phone
    if (searchForm.idCard) params.cartNumber = searchForm.idCard
    if (searchForm.status) params.status = searchForm.status === '正常' ? 1 : 2

    console.log('发送请求到:', '/customers/list')
    console.log('请求参数:', params)

    const response = await api.get('/customers/list', {
      params
    })

    console.log('响应数据:', response)

    if (response.code === 200) {
      // 处理客户列表数据
      customerList.value = response.data.records.map(customer => ({
        id: customer.id,
        name: customer.name,
        phone: customer.phone,
        cartNumber: customer.cartNumber,
        status: customer.status === 1 ? '正常' : '黑名单',
        rentalCount: customer.rentalTimes || 0,
        lastRental: customer.latelyRentalTime || '暂无记录'
      }))

      // 更新分页信息
      total.value = response.data.total
      currentPage.value = response.data.current
      pageSize.value = response.data.size

      if (isSearch && customerList.value.length === 0) {
        ElMessage.info('未找到符合条件的客户')
      }
    } else {
      ElMessage.error(response.message || '获取客户列表失败')
    }
  } catch (error) {
    console.error('获取客户列表错误:', error)
    console.error('错误详情:', {
      message: error.message,
      response: error.response,
      status: error.response?.status,
      data: error.response?.data
    })

    if (error.response?.status === 401) {
      ElMessage.error('登录已过期，请重新登录')
      localStorage.clear()
      window.location.href = '/login'
    } else if (error.response?.status === 404) {
      ElMessage.error('API接口不存在，请检查后端服务')
    } else if (error.code === 'ECONNABORTED') {
      ElMessage.error('请求超时，请检查网络连接')
    } else {
      ElMessage.error('获取客户列表失败：' + (error.response?.data?.message || error.message || '未知错误'))
    }
  } finally {
    loading.value = false
    searching.value = false
  }
}

// 获取客户租赁历史
const fetchRentalHistory = async (customerId) => {
  try {
    historyLoading.value = true

    const response = await api.get(`/rental/customer/${customerId}`)

    if (response.code === 200) {
      rentalHistory.value = response.data || []
    } else {
      console.error('获取租赁历史失败:', response.message)
      rentalHistory.value = []
    }
  } catch (error) {
    console.error('获取租赁历史错误:', error)
    rentalHistory.value = []
  } finally {
    historyLoading.value = false
  }
}

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1
  fetchCustomerList(true)
}

// 重置搜索
const handleReset = () => {
  Object.assign(searchForm, {
    name: '',
    phone: '',
    idCard: '',
    status: ''
  })
  currentPage.value = 1
  fetchCustomerList()
}

// 分页处理
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchCustomerList()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  fetchCustomerList()
}

// 行点击处理
const handleRowClick = (row) => {
  handleViewDetail(row)
}

// 查看详情
const handleViewDetail = (row) => {
  selectedCustomer.value = row
  detailDialogVisible.value = true
  fetchRentalHistory(row.id)
}

// 关闭详情对话框
const handleDetailClose = () => {
  detailDialogVisible.value = false
  selectedCustomer.value = null
  rentalHistory.value = []
}

// 添加客户相关方法
const handleAddCustomer = () => {
  addDialogVisible.value = true
  resetAddCustomerForm()
}

const handleAddDialogClose = () => {
  addDialogVisible.value = false
  resetAddCustomerForm()
  if (addCustomerFormRef.value) {
    addCustomerFormRef.value.clearValidate()
  }
}

const resetAddCustomerForm = () => {
  Object.assign(addCustomerForm, {
    name: '',
    phone: '',
    cartNumber: '',
    status: '正常'
  })
}

const handleSubmitCustomer = async () => {
  if (!addCustomerFormRef.value) return

  try {
    await addCustomerFormRef.value.validate()
    submittingCustomer.value = true

    const token = localStorage.getItem('Token')
    if (!token) {
      ElMessage.error('未登录或登录已过期')
      return
    }

    // 构建提交数据，将状态转换为数字
    const submitData = {
      name: addCustomerForm.name,
      phone: addCustomerForm.phone,
      cartNumber: addCustomerForm.cartNumber,
      status: addCustomerForm.status === '正常' ? 1 : 2
    }

    console.log('发送请求到:', '/customers/add')
    console.log('请求数据:', submitData)

    const response = await api.post('/customers/add', submitData)

    console.log('响应数据:', response)

    if (response.code === 200) {
      ElMessage.success('客户添加成功！')
      addDialogVisible.value = false
      resetAddCustomerForm()
      // 刷新客户列表
      currentPage.value = 1
      await fetchCustomerList()
    } else {
      ElMessage.error(response.message || '添加客户失败')
    }
  } catch (error) {
    console.error('添加客户错误:', error)
    if (error.message) {
      ElMessage.error('添加客户失败：' + error.message)
    } else {
      ElMessage.error('添加客户失败，请检查网络连接')
    }
  } finally {
    submittingCustomer.value = false
  }
}

// 修改客户相关方法
const handleEditCustomer = (customer) => {
  // 填充修改表单数据
  editCustomerForm.id = customer.id
  editCustomerForm.name = customer.name
  editCustomerForm.phone = customer.phone
  editCustomerForm.cartNumber = customer.cartNumber
  editCustomerForm.status = customer.status

  editDialogVisible.value = true
}

const handleEditDialogClose = () => {
  editDialogVisible.value = false
  resetEditCustomerForm()
  if (editCustomerFormRef.value) {
    editCustomerFormRef.value.clearValidate()
  }
}

const resetEditCustomerForm = () => {
  Object.assign(editCustomerForm, {
    id: null,
    name: '',
    phone: '',
    cartNumber: '',
    status: '正常'
  })
}

const handleUpdateCustomer = async () => {
  if (!editCustomerFormRef.value) return

  try {
    await editCustomerFormRef.value.validate()
    updatingCustomer.value = true

    const token = localStorage.getItem('Token')
    if (!token) {
      ElMessage.error('未登录或登录已过期')
      return
    }

    // 构建提交数据，将状态转换为数字
    const updateData = {
      name: editCustomerForm.name,
      phone: editCustomerForm.phone,
      cartNumber: editCustomerForm.cartNumber,
      status: editCustomerForm.status === '正常' ? 1 : 2
    }

    console.log('发送修改请求到:', `/customers/updateCustomer?customerId=${editCustomerForm.id}`)
    console.log('请求数据:', updateData)

    const response = await fetch(`http://localhost:8080/customers/updateCustomer/${editCustomerForm.id}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        'Token': token
      },
      body: JSON.stringify(updateData)
    })

    if (response.status === 401) {
      localStorage.removeItem('Token')
      localStorage.removeItem('user')
      window.location.href = '/login'
      return
    }

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }

    const result = await response.json()
    console.log('修改客户响应:', result)

    if (result.code === 200) {
      ElMessage.success('客户信息修改成功！')
      editDialogVisible.value = false
      resetEditCustomerForm()
      // 刷新客户列表
      await fetchCustomerList()
    } else {
      ElMessage.error(result.message || '修改客户信息失败')
    }
  } catch (error) {
    console.error('修改客户错误:', error)
    if (error.message) {
      ElMessage.error('修改客户信息失败：' + error.message)
    } else {
      ElMessage.error('修改客户信息失败，请检查网络连接')
    }
  } finally {
    updatingCustomer.value = false
  }
}

// 工具函数
const getStatusType = (status) => {
  return status === '正常' ? 'success' : 'danger'
}

const getRentalStatusType = (status) => {
  const statusTypeMap = {
    '-1': 'danger',   // 已拒绝
    0: 'warning',     // 待审核
    1: 'primary',     // 进行中
    2: 'success'      // 已完成
  }
  return statusTypeMap[status] || 'info'
}

const getRentalStatusText = (status) => {
  const statusMap = {
    '-1': '已拒绝',
    0: '待审核',
    1: '进行中',
    2: '已完成'
  }
  return statusMap[status] || '未知'
}

// 组件挂载时获取数据
onMounted(() => {
  console.log('EmployeeCustomers 组件已挂载')
  console.log('当前Token:', localStorage.getItem('Token'))
  console.log('当前用户角色:', localStorage.getItem('userRole'))
  fetchCustomerList()
})
</script>

<style scoped>
.page-container {
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.page-header h1 {
  color: #2c3e50;
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  margin: 0;
}

.page-header h1::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  border-radius: 2px;
}

.page-header .el-button {
  border-radius: 20px;
  padding: 12px 25px;
  font-weight: 600;
  font-size: 16px;
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  border: none;
  transition: all 0.3s ease;
}

.page-header .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(17, 153, 142, 0.3);
}

.content-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 40px;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.content-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}

/* 搜索区域样式 */
.search-section {
  margin-bottom: 30px;
  padding: 25px;
  background: linear-gradient(135deg, rgba(17, 153, 142, 0.05) 0%, rgba(56, 239, 125, 0.05) 100%);
  border-radius: 15px;
  border: 1px solid rgba(17, 153, 142, 0.1);
}

.search-form {
  margin: 0;
}

.search-form .el-form-item {
  margin-bottom: 20px;
  width: 100%;
}

.search-form .el-form-item__label {
  font-weight: 600;
  color: #2c3e50;
  width: 80px;
  text-align: right;
}

.search-form .el-input__wrapper,
.search-form .el-select .el-input__wrapper {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  width: 100%;
}

.search-form .el-input__wrapper:hover,
.search-form .el-select .el-input__wrapper:hover {
  box-shadow: 0 4px 12px rgba(17, 153, 142, 0.2);
}

.search-buttons {
  text-align: center;
  margin-top: 10px;
}

.search-buttons .el-button {
  border-radius: 20px;
  font-weight: 600;
  transition: all 0.3s ease;
  margin: 0 10px;
  padding: 10px 25px;
}

.search-buttons .el-button--primary {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  border: none;
}

.search-buttons .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(17, 153, 142, 0.3);
}

/* 表格区域样式 */
.table-section {
  margin-top: 20px;
}

.customer-table {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.customer-table .el-table__header-wrapper {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.customer-table .el-table__header th {
  background: transparent !important;
  color: white !important;
  font-weight: 600;
  border: none !important;
}

.customer-table .el-table__row {
  transition: all 0.2s ease;
  cursor: pointer;
}

.customer-table .el-table__row:hover {
  background-color: rgba(17, 153, 142, 0.05) !important;
}

.customer-table .el-table__cell {
  border-bottom: 1px solid #f0f0f0;
  padding: 12px 8px;
}

.rental-count {
  display: inline-block;
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

/* 分页样式 */
.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.pagination-container .el-pagination {
  background: rgba(17, 153, 142, 0.05);
  padding: 15px 20px;
  border-radius: 25px;
}

/* 客户详情对话框样式 */
.customer-detail {
  max-height: 600px;
  overflow-y: auto;
}

.customer-detail .el-descriptions {
  margin-bottom: 25px;
}

.customer-detail .el-descriptions__title {
  color: #11998e;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 15px;
}

.rental-history h3 {
  color: #11998e;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(17, 153, 142, 0.2);
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.dialog-footer .el-button {
  border-radius: 20px;
  padding: 10px 25px;
  font-weight: 600;
}

/* 添加客户表单样式 */
.add-customer-form {
  margin: 20px 0;
}

.add-customer-form .el-form-item {
  margin-bottom: 25px;
}

.add-customer-form .el-form-item__label {
  font-weight: 600;
  color: #2c3e50;
}

.add-customer-form .el-input__wrapper,
.add-customer-form .el-select .el-input__wrapper,
.add-customer-form .el-textarea__inner {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.add-customer-form .el-input__wrapper:hover,
.add-customer-form .el-select .el-input__wrapper:hover,
.add-customer-form .el-textarea__inner:hover {
  box-shadow: 0 4px 12px rgba(17, 153, 142, 0.2);
}

.add-customer-form .el-input__wrapper.is-focus,
.add-customer-form .el-select .el-input__wrapper.is-focus,
.add-customer-form .el-textarea__inner:focus {
  box-shadow: 0 4px 12px rgba(17, 153, 142, 0.3);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-form .el-form-item__label {
    width: 70px;
  }
}

@media (max-width: 992px) {
  .customer-table {
    font-size: 13px;
  }

  .customer-table .el-table__cell {
    padding: 10px 6px;
  }
}

@media (max-width: 768px) {
  .page-container {
    padding: 20px 10px;
  }

  .content-card {
    padding: 20px;
  }

  .search-section {
    padding: 15px;
  }

  .search-form .el-form-item__label {
    width: 60px;
    font-size: 14px;
  }

  .customer-table {
    font-size: 12px;
  }

  .customer-table .el-table__cell {
    padding: 8px 4px;
  }

  .customer-detail {
    max-height: 400px;
  }

  .pagination-container .el-pagination {
    padding: 10px 15px;
  }
}

@media (max-width: 576px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .page-header h1 {
    font-size: 24px;
    margin-bottom: 15px;
  }

  .page-header h1::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .page-header .el-button {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }

  .search-section {
    padding: 10px;
  }

  .search-form .el-form-item__label {
    width: 50px;
    font-size: 12px;
  }

  .search-buttons .el-button {
    padding: 8px 15px;
    margin: 5px;
  }

  .customer-table .el-button {
    padding: 4px;
    min-width: 32px;
  }

  .customer-table .el-button span {
    display: none;
  }
}

/* 确保表格在小屏幕上可以水平滚动 */
@media (max-width: 768px) {
  .table-section {
    overflow-x: auto;
  }

  .customer-table {
    min-width: 600px;
  }
}
</style>